<template>
	<view class="content" style="background-color: white;">
		
		<view style="width: 720rpx;margin-top: 20rpx;">
			<view class="table-title">
				{{notice.noticeTitle}}
			</view>
			<div style="height: 20rpx;"></div>
			<view style="background-color: white;min-height: 300rpx;display: flex;justify-content: center;align-items: center;">
				<view style="white-space: pre-wrap;width: 100%;">
					<!-- <rich-text :nodes="notice.noticeContent"></rich-text> -->
					<mp-html :content="notice.noticeContent" @linktap="handleNoticeClick" :copy-link="false" container-style="white-space: pre-wrap !important;"/>
					<!-- <u-parse :content="notice.noticeContent" @navigate="handleNoticeClick"></u-parse> -->
				</view>
			</view>
			
		</view>
		
		<view style="height: 60rpx;"></view>
	</view>
</template>

<script>
	import {image_base_url,base_url} from '@/api/config.js'
	export default {
		data() {
			return {
				imageBaseUrl: image_base_url,
				baseUrl : base_url,
				noticeId:0,
				dataList:[],
				notice: null,
			}
		},
		onLoad(option){
			this.noticeId = option.noticeId
			this.getNotice()
		},
		methods: {
			getNotice() {
				this.$http({
					url: '/system/notice/list',
					method: 'get',
				}).then(res => {
					this.dataList = res.rows;
					if(this.dataList && this.dataList.length>0){
						let notice = this.dataList.find(item =>{
							return item.noticeId == this.noticeId
						})
						this.notice = notice
						this.notice.noticeContent = this.notice.noticeContent.replaceAll('/dev-api/profile', image_base_url + '/profile')
														.replaceAll('/prod-api/profile', image_base_url + '/profile')
														.replaceAll('<img', '<img style="width:100% !important;"')
														.replaceAll('<blockquote','<blockquote style="border-left: 4px solid rgb(204, 204, 204); margin: 10px 0px; padding-left: 16px; padding-right: 10px; color: rgb(85, 85, 85);font-size:15px;line-height:25px;"')
														.replaceAll('<pre class="ql-syntax" spellcheck="false"', '<pre style="background-color:black;color:white;padding:5px 10px;margin-top:5px;margin-bottom:5px;border-radius:3px;line-height:25px;"')
					}
				});
			},
			handleNoticeClick(e){
				const href = e.href
				// uni.navigateTo({
				// 	url: '/pages/notice/noticeView/noticeView?href='+encodeURIComponent(this.baseUrl.replaceAll('dev-api','#').replaceAll('prod-api','#') + '/system/notice/notice-h5/' + noticeId)
				// })
				uni.navigateTo({
					url: '/pages/notice/noticeView/noticeView?href='+encodeURIComponent(href)
				})
				// uni.navigateTo({
				// 	url: '/pages/notice/noticeView/noticeView?href='+encodeURIComponent(this.baseUrl.replaceAll('dev-api','#').replaceAll('prod-api','#') + '/system/notice/notice-view-h5/' + encodeURIComponent(e.href))
				// })
			},

		}
	}
</script>

<style lang="scss">
.table-title{
	height: 140rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bolder;
	padding-left: 5%;
	padding-right: 5%;
	line-height: 70rpx;
	border: solid 1rpx #e8f4ff;
	background-color: #e8f4ff;
	color: #1890ff;
	letter-spacing: 2rpx;
	text-align: center;
}

</style>
